/*
 * @Author: Otway
 * @Date: 2019-01-09 11:16:08
 * @LastEditors: Otway
 * @LastEditTime: 2019-08-30 18:50:09
 * @copyright: h-visions
 */
import React, { PureComponent } from 'react';
import {
  Row,
  Col,
  Form,
  Input,
  DatePicker,
  Upload,
  Button,
  Icon,
  Select
} from 'antd';
import TextArea from 'antd/lib/input/TextArea';
// import { BasicPagination, isInvalidObject, TableCustomize, openSuccessModal, openModalMessage, compareDate, compareString } from '../../../components/TableCustomize'
import moment from 'moment'
const FormItem = Form.Item;
const { Option } = Select
const formItemLayout = {
  // 抽屉里面Form。二列的布局比例
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 18
  }
};

class AddFrom extends PureComponent {
  state = {
    fileList: [],
    batchNo: '',
    formData: {}
  }
  componentDidMount() {
    const { fileList, formData } = this.props;
    this.setState({ fileList: fileList ? fileList : [], formData });
  }

  handleChange = (value) => {
    const { batchNoList, formData, form: { setFieldsValue } } = this.props
    let a = batchNoList.find(item => item.batchNo == value)
    setFieldsValue({
      'firstOutputTime': a.firstOutputTime ? moment(a.firstOutputTime) : moment(new Date()),
      'firstDeliveryTime': a.firstDeliveryTime ? moment(a.firstDeliveryTime) : moment(new Date()),
      'model': a.model
    })
    this.setState({ formData })
  }
  render() {
    const {
      // formData,
      form: { getFieldDecorator },
      saveFileList,
      onRemoveFile,
      formType,
      batchNoList
    } = this.props;
    const { fileList, formData } = this.state;
    const accept = {
      accept: '.png,.jpg,.jpge,.pdf'
    }
    const propsFile = {
      ...accept,
      onRemove: (file) => {
        if (file.status == 'done') {
          onRemoveFile(file)
        }
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          saveFileList(newFileList)
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        // console.log(file, 'file++++++++++++');
        // let size = file.size / 1024 / 1024
        // if (size > 1) {
        //   openModalMessage('warning', '文件大小超过1M，无法上传！')
        //   return
        // }
        saveFileList([...fileList, file])
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };
    return (
      <Form >
        <Row style={{ display: formType !== 2 ? 'block' : 'none' }}>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'特供机信息管理Id'} hidden>
              {getFieldDecorator('specialProvisionId', {
                initialValue: formData.specialProvisionId || null,
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'批号'}>
              {getFieldDecorator('batchNo', {
                initialValue: formData.batchNo || undefined,
                rules: [
                  {
                    required: true,
                    message: '请选择批号'
                  }
                ]
              })(
                // <Input disabled={formType == 1 ? true : false} />
                <Select
                  placeholder='请选择批号'
                  allowClear
                  disabled={formType == 1 ? true : false}
                  onChange={this.handleChange}
                  showSearch={true}
                >
                  {
                    batchNoList.map(item => {
                      return <Option key={item.batchNo}>{item.batchNo}</Option>
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'顺序号'}>
              {getFieldDecorator('orderNo', {
                initialValue: formData.orderNo || null,
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input disabled placeholder='自动生成' />)}
            </FormItem>
          </Col>
          {/* <Col span={24}>
            <FormItem {...formItemLayout} label={'安装日期'}>
              {getFieldDecorator('arrangeTime', {
                initialValue: moment(formData.arrangeTime) || undefined,
                rules: [
                  {
                    required: true,
                    message: ''
                  }
                ]
              })(<DatePicker style={{ width: '100%' }} />)}
            </FormItem>
          </Col> */}
          <Col span={24}>
            <FormItem {...formItemLayout} label={'出机日期'}>
              {getFieldDecorator('firstOutputTime', {
                initialValue: moment(formData.firstOutputTime) || undefined,
                rules: [
                  {
                    required: true,
                    message: ''
                  }
                ]
              })(<DatePicker style={{ width: '100%' }} />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'交机日期'}>
              {getFieldDecorator('firstDeliveryTime', {
                initialValue: moment(formData.firstDeliveryTime) || undefined,
                rules: [
                  {
                    required: true,
                    message: ''
                  }
                ]
              })(<DatePicker style={{ width: '100%' }} />)}
            </FormItem>
          </Col>
          {/* <Col span={24}>
            <FormItem {...formItemLayout} label={'装配车间'}>
              {getFieldDecorator('department', {
                initialValue: formData.department || '',
                rules: [
                  {
                    required: true,
                    message: ''
                  }
                ]
              })(<Input />)}
            </FormItem>
          </Col> */}
          <Col span={24}>
            <FormItem {...formItemLayout} label={'客户名称'}>
              {getFieldDecorator('customerName', {
                initialValue: formData.customerName || '',
                rules: [
                  {
                    required: true,
                    message: ''
                  }
                ],
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'机型'}>
              {getFieldDecorator('model', {
                initialValue: formData.model || '',
                rules: [
                  {
                    required: true,
                    message: ''
                  }
                ],
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'合同号'}>
              {getFieldDecorator('contractNo', {
                initialValue: formData.contractNo || '',
                rules: [
                  {
                    required: true,
                    message: ''
                  }
                ],
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'特供内容'}>
              {getFieldDecorator('specialContent', {
                initialValue: formData.specialContent || '',
              })(<TextArea />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'备注'}>
              {getFieldDecorator('remarks', {
                initialValue: formData.remarks || '',
              })(<TextArea />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'图文资料'}>
              {getFieldDecorator('file', {
              })(<div>
                <Upload {...propsFile}>
                  <Button >
                    <Icon type="upload" /> 上传文件
                  </Button>
                  <p style={{ fontSize: 10 }}>仅支持PNG，JPG，PDF格式</p>
                  {/* <p style={{ fontSize: 10 }}>上传文件大小不超过1M</p> */}
                </Upload></div>)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }
}

export default Form.create()(AddFrom);
